<template>
  <Card>
    <template slot="header">
      <h5 class="title">Edit Profile</h5>
    </template>
    <form>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Company (disabled)</label>
            <input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" placeholder="Username" value="michael23">
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" placeholder="Email">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" placeholder="Company" value="Creative Code Inc">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" placeholder="Last Name" value="Andrew">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Address</label>
            <input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label>City</label>
            <input type="text" class="form-control" placeholder="City" value="Melbourne">
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label>Country</label>
            <input type="text" class="form-control" placeholder="Country" value="Australia">
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label>Postal Code</label>
            <input type="number" class="form-control" placeholder="ZIP Code">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>About Me</label>
            <textarea rows="4" cols="80" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
          </div>
        </div>
      </div>
    </form>
  </Card>
</template>
<script>
  import Card from 'src/components/UIComponents/Cards/Card.vue'

  export default {
    components: {Card},
    data () {
      return {
        user: {
          company: 'Paper Dashboard',
          username: 'michael23',
          email: '',
          lastName: 'Faker',
          address: 'Melbourne, Australia',
          city: 'melbourne',
          postalCode: '',
          aboutMe: `Oh so, your weak rhyme. You doubt I'll bother, reading into it.I'll probably won't, left to my own devicesBut that's the difference in our opinions.`
        }
      }
    },
    methods: {
      updateProfile () {
        alert('Your data: ' + JSON.stringify(this.user))
      }
    }
  }

</script>
<style>

</style>
